<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品列表</title>
    <link rel="shortcut icon" href="img/logo.ico">  <!--引入LOGO图标-->
    <link rel="stylesheet" href="css/common.css">  <!--引入公共css样式-->
    <link rel="stylesheet" href="css/shop_list.css">  <!--引入address的css样式-->
</head>
<body>
<div class="header">
    <div class="top">
        <div class="container">
            <div class="login">
                <span>欢迎来到音响商城!</span>
                <a href="login.html" id="login">请登录</a>
                <a href="register.html" id="register">快速注册</a>
            </div>
            <div class="classify">
                <a href="javascript:;">订阅查询</a>
                <a href="javascript:;" class="collect"><img src="img/index_2.png" alt="index_2.png">收藏的品牌</a>
                <div class="service" id="service">
                    <img src="img/index_3.png" alt="index_3.png">
                    <div>
                        <span>客户服务</span>
                        <a href="javascript:;">客户服务</a>
                    </div>
                    <img src="img/index_4.png" alt="index_4.png">
                </div>
                <p>服务热线<span>400-22-666</span></p>
            </div>
        </div>
    </div>
    <div class="middle container">
        <a href="index.html"><img class=logo src="img/index_1.png" alt="../img/index_1.png"></a>
        <div class="search">
            <form action="">
                <input type="text" placeholder="搜索“蓝牙音响”试试" id="content">
                <button id="clickSearch">搜索</button>
            </form>
            <div class="product" id="product">
                <a href="javascript:;">无线音箱</a>
                <a href="javascript:;">汽车扬声器</a>
                <a href="javascript:;">蓝牙音箱</a>
            </div>
        </div>
        <a href="shop_cart.html" class="shop" id="shop">购物车</a>
    </div>
    <div class="bottom">
        <div class="container">
            <div class="sub_nav" id="sub_nav">
                <span>全部产品分类</span>
                <div class="subNav" id="subNav">
                    <dl>
                        <dt>汽车喇叭 / 高音头</dt>
                        <dd><a href="pro_details.html">套装喇叭</a></dd>
                        <dd><a href="pro_details.html">汽车喇叭</a></dd>
                        <dd><a href="pro_details.html">同轴喇叭</a></dd>
                        <dd><a href="pro_details.html">高音喇叭</a></dd>
                        <dd><a href="pro_details.html">低音喇叭</a></dd>
                    </dl>
                    <dl>
                        <dt>车载MP3</dt>
                        <dd><a href="pro_details.html">车载MP4</a></dd>
                        <dd><a href="pro_details.html">车载MP5</a></dd>
                        <dd><a href="pro_details.html">车载MP3</a></dd>
                    </dl>
                    <dl>
                        <dt>汽车喇叭 / 低音炮</dt>
                        <dd><a href="pro_details.html">套装喇叭</a></dd>
                        <dd><a href="pro_details.html">汽车喇叭</a></dd>
                        <dd><a href="pro_details.html">同轴喇叭</a></dd>
                        <dd><a href="pro_details.html">高音喇叭</a></dd>
                    </dl>
                    <dl>
                        <dt>汽车喇叭 / 高音头</dt>
                        <dd><a href="pro_details.html">套装喇叭</a></dd>
                        <dd><a href="pro_details.html">汽车喇叭</a></dd>
                        <dd><a href="pro_details.html">同轴喇叭</a></dd>
                        <dd><a href="pro_details.html">高音喇叭</a></dd>
                        <dd><a href="pro_details.html">低音喇叭</a></dd>
                    </dl>
                    <dl>
                        <dt>车载MP3</dt>
                        <dd><a href="pro_details.html">车载MP4</a></dd>
                        <dd><a href="pro_details.html">车载MP5</a></dd>
                        <dd><a href="pro_details.html">车载MP3</a></dd>
                    </dl>
                </div>
            </div>
            <ul class="nav">
                <li><a href="index.html">首页</a></li>
                <li><a href="shop_list.html">新品</a></li>
                <li><a href="shop_list.html">选音响</a></li>
            </ul>
        </div>
    </div>
</div>
    <div class="main container">
        <div class="sidebar">
            <h2>热卖推荐</h2>
            <ul>
                <li>
                    <a href="pro_details.html">
                        <img src="img/shop_list_1.png" alt="shop_list_1.png">
                        <p>¥99.00</p>
                        <h3>德国曼斯特汽车音响</h3>
                    </a>
                    <span>6.5寸</span>
                    <i>评论<s>1224条</s></i>
                </li>
                <li>
                    <a href="pro_details.html">
                        <img src="img/shop_list_1.png" alt="shop_list_1.png">
                        <p>¥99.00</p>
                        <h3>德国曼斯特汽车音响</h3>
                    </a>
                    <span>6.5寸</span>
                    <i>评论<s>1224条</s></i>
                </li>
                <li>
                    <a href="pro_details.html">
                        <img src="img/shop_list_1.png" alt="shop_list_1.png">
                        <p>¥99.00</p>
                        <h3>德国曼斯特汽车音响</h3>
                    </a>
                    <span>6.5寸</span>
                    <i>评论<s>1224条</s></i>
                </li>
                <li>
                    <a href="pro_details.html">
                        <img src="img/shop_list_1.png" alt="shop_list_1.png">
                        <p>¥99.00</p>
                        <h3>德国曼斯特汽车音响</h3>
                    </a>
                    <span>6.5寸</span>
                    <i>评论<s>1224条</s></i>
                </li>
                <li>
                    <a href="pro_details.html">
                        <img src="img/shop_list_1.png" alt="shop_list_1.png">
                        <p>¥99.00</p>
                        <h3>德国曼斯特汽车音响</h3>
                    </a>
                    <span>6.5寸</span>
                    <i>评论<s>1224条</s></i>
                </li>
                <li>
                    <a href="pro_details.html">
                        <img src="img/shop_list_1.png" alt="shop_list_1.png">
                        <p>¥99.00</p>
                        <h3>德国曼斯特汽车音响</h3>
                    </a>
                    <span>6.5寸</span>
                    <i>评论<s>1224条</s></i>
                </li>
            </ul>
        </div>
        <div class="content">
            <div class="location">
                当前位置：<a href="index.html" class="center">首页</a><i>&gt</i>音响
            </div>
            <div class="query" id="query">
                <div class="search">
                    <img src="img/shop_list_2.png" alt="shop_list_2.png">
                    <span>全部</span>
                    <s>&gt;</s>
                    <i>音响</i>
                    <s>&gt;</s>
                    <div><input type="text"><img src="img/shop_list_3.png" alt="shop_list_3.png"></div>
                    <b>相关产品<s>321</s>件</b>
                </div>
                <div class="classify">
                    <span>相关分类</span>
                    <ul>
                        <li><a href="javascript:;">无线音响</a></li>
                        <li><a href="javascript:;">蓝牙音响</a></li>
                        <li><a href="javascript:;">汽车扬声器</a></li>
                        <li><a href="javascript:;">蓝牙无线音响</a></li>
                        <li><a href="javascript:;">爆炸音响</a></li>
                    </ul>
                </div>
                <div class="brand" id="brand">
                    <div>
                        <span>品牌</span>
                        <a href="javascript:;">
                            <img src="img/shop_list_3.png" alt="shop_list_3.png"><input type="text">
                        </a>
                    </div>
                    <ul>
                        <li><a href="javascript:;">无线音响</a></li>
                        <li><a href="javascript:;">蓝牙音响</a></li>
                        <li><a href="javascript:;">汽车扬声器</a></li>
                        <li><a href="javascript:;">蓝牙无线音响</a></li>
                        <li><a href="javascript:;">爆炸音响</a></li>
                        <li><a href="javascript:;">爆炸音响</a></li>
                        <li><a href="javascript:;">无线音响</a></li>
                        <li><a href="javascript:;">蓝牙音响</a></li>
                        <li><a href="javascript:;">无线音响</a></li>
                        <li><a href="javascript:;">蓝牙音响</a></li>
                        <li><a href="javascript:;">汽车扬声器</a></li>
                        <li class="show"><a href="javascript:;">蓝牙无线音响</a></li>
                        <li><a href="javascript:;">爆炸音响</a></li>
                        <li><a href="javascript:;">爆炸音响</a></li>
                        <li><a href="javascript:;">无线音响</a></li>
                        <li><a href="javascript:;">蓝牙音响</a></li>
                        <li><a href="javascript:;">无线音响</a></li>
                        <li><a href="javascript:;">蓝牙音响</a></li>
                        <li><a href="javascript:;">汽车扬声器</a></li>
                        <li><a href="javascript:;">蓝牙无线音响</a></li>
                        <li><a href="javascript:;">爆炸音响</a></li>
                        <li><a href="javascript:;">爆炸音响</a></li>
                        <li><a href="javascript:;">无线音响</a></li>
                        <li><a href="javascript:;">蓝牙音响</a></li>
                    </ul>
                    <i id="open">展开<b>&gt</b></i>
                </div>
                <div class="sort" id="sort">
                    <div>
                        <i class="on" id="default" order="true">默认排序</i>
                        <i order="true">销量<img src="img/shop_list_4.png" alt="shop_list_4.png"></i>
                        <i id="price" order="true">
                            价格<img src="img/shop_list_4.png" alt="shop_list_4.png">
                        </i>
                        <i order="true">
                            排序<img src="img/shop_list_4.png" alt="shop_list_4.png">
                        </i>
                        <i order="true">
                            上架时间<img src="img/shop_list_4.png" alt="shop_list_4.png">
                        </i>
                    </div>
                    <div>
                        <input type="text" placeholder="¥" id="min">
                        <b>-</b>
                        <input type="text" placeholder="¥" id="max">
                        <s id="sure">确定</s>
                    </div>
                </div>
                <div class="dispatch">
                    <span>配送到</span>
                    <div>
                        <select id="prov"></select>
                        <select id="city">
                            <option>--请选择市--</option>
                        </select>
                        <select id="county">
                            <option>--请选择县--</option>
                        </select>
                        <img src="img/shop_list_6.png" alt="shop_list_6.png">
                    </div>
                    <label>
                        <input type="checkbox">
                        <b></b>
                        <i>仅显示有货</i>
                    </label>
                </div>
                <ul class="goods" id="goods">
                    <!--<li>
                        <a href="pro_details.html">
                            <img src="../img/shop_list_7.png" alt="shop_list_7.png">
                            <p>JBL 汽车音响改装 <span>CS760C+CS763</span>喇叭套装6.5英寸车载扬声器</p>
                        </a>
                        <span>¥<i>996.00</i></span>
                        <div>
                            <b><i>23536</i>评价</b>
                            <img src="../img/shop_list_14.png" alt="shop_list_14.png">
                            <img src="../img/shop_list_15.png" alt="shop_list_15.png">
                        </div>
                    </li>-->
                </ul>
                <div class="page" id="page">
                    <a href="javascript:;"><i>&lt</i>上一页</a>
                    <a href="javascript:;" class="num on">1</a>
                    <a href="javascript:;" class="num">2</a>
                    <a href="javascript:;" class="num">3</a>
                    <a href="javascript:;" class="num">4</a>
                    <a href="javascript:;" class="num">5</a>
                    <a href="javascript:;" class="num">6</a>
                    <a href="javascript:;" class="num">7</a>
                    <a href="javascript:;" class="num disabled">...</a>
                    <a href="javascript:;">下一页<i>&gt</i></a>
                    <span class="and">共99页</span>
                    <span>到第</span>
                    <input type="text" id="text">
                    <span>页</span>
                    <a href="javascript:;" class="confirm">确定</a>
                </div>
                <form action="" class="hunt_for">
                    <input type="text" placeholder="在这里可以直接搜索哦" id="huntText">
                    <span id="huntSearch">搜索</span>
                </form>
            </div>
        </div>
    </div>
    <div class="footer">
        <ul class="access container">
            <li>
                <img src="img/index_31.png" alt="index_31.png">

                <div class="text">
                    <h3>天天低价</h3>

                    <p>超值特价 每日更新</p>
                </div>
            </li>
            <li>
                <img src="img/index_32.png" alt="index_32.png">

                <div class="text">
                    <h3>正品保障</h3>

                    <p>100%正品采购</p>
                </div>
            </li>
            <li>
                <img src="img/index_33.png" alt="index_33.png">

                <div class="text">
                    <h3>15天退换货</h3>

                    <p>退换无忧，购物更放心</p>
                </div>
            </li>
            <li>
                <img src="img/index_34.png" alt="index_34.png">

                <div class="text">
                    <h3>评价晒单有礼</h3>

                    <p>分享评价活动礼券</p>
                </div>
            </li>
        </ul>
        <div class="service container">
            <dl>
                <dt>新手入门</dt>
                <dd><a href="javascript:;">购物流程</a></dd>
                <dd><a href="javascript:;">会员制度</a></dd>
                <dd><a href="javascript:;">订单查询</a></dd>
            </dl>
            <dl>
                <dt>支付方式</dt>
                <dd><a href="javascript:;">货到付款</a></dd>
                <dd><a href="javascript:;">网上支付</a></dd>
                <dd><a href="javascript:;">银行支付</a></dd>
                <dd><a href="javascript:;">其他支付</a></dd>
            </dl>
            <dl>
                <dt>配送服务</dt>
                <dd><a href="javascript:;">配送进度查询</a></dd>
                <dd><a href="javascript:;">商品验货与验收</a></dd>
            </dl>
            <dl>
                <dt>售后保证</dt>
                <dd><a href="javascript:;">退换货政策</a></dd>
                <dd><a href="javascript:;">联系客服</a></dd>
            </dl>
            <div class="scan">
                <p>扫一扫关注公众号</p>
                <img src="img/index_35.png" alt="index_35.png">
            </div>
        </div>
        <div class="record container">
            <p>Copyright© 2002-2017 ，音响有限公司版权所有 苏ICP备10207551号-4| 苏B1-20130131| 苏B2-20130376</p>
            <ul>
                <li><a href="javascript:;"><img src="img/index_42.png" alt="index_42.png"></a></li>
                <li><a href="javascript:;"><img src="img/index_43.png" alt="index_43.png"></a></li>
                <li><a href="javascript:;"><img src="img/index_44.png" alt="index_44.png"></a></li>
                <li><a href="javascript:;"><img src="img/index_45.png" alt="index_45.png"></a></li>
                <li><a href="javascript:;"><img src="img/index_46.png" alt="index_46.png"></a></li>
                <li><a href="javascript:;"><img src="img/index_47.png" alt="index_47.png"></a></li>
                <li><a href="javascript:;"><img src="img/index_48.png" alt="index_48.png"></a></li>
                <li><a href="javascript:;"><img src="img/index_49.png" alt="index_49.png"></a></li>
            </ul>
        </div>
    </div>
    <script src="lib/jquery-1.11.3.min.js"></script>
    <script src="lib/storages.js"></script>
    <script src="lib/msgList.js"></script>
    <script src="data/data.js"></script>
    <script src="js/common.js"></script>
    <script src="js/shop_list.js"></script>
</body>
</html>